<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>shadow tree style</title>
		<style type="text/css">
			/* ::shadow */
			/*.shadowhost::shadow h1 {
		        padding: 20px;
		        border: 1px solid #f00;
		    }*/
			/* /deep/  */
			
			.shadowhost /deep/ h1 {
				padding: 20px;
				border: 1px solid #66ccff;
			}
		</style>
	</head>

	<body>
		<h1>shadow tree style</h1>
		<div class="shadowhost">
			<em class="shadowhost_content1">唱歌</em>
			<em class="shadowhost_content2">跳舞</em>
		</div>
		<!-- S 模板标签 template -->
		<template class="template">
			<style>
				/* 定义宿主样式:host */
				
				 :host {
					color: red;
				}
				/* 定义宿主hover状态下的样式 */
				
				 :host(:hover) {
					color: black;
				}
				/* 分布节点的样式渲染需要用到 ::content,直接写 em {} 不生效 */
				
				 ::content>em {
					padding: 6px;
					color: #fff;
					background: orange;
					border-radius: 10px;
				}
			</style>
			<h1>你<content select=".shadowhost_content1"></content>！，我<content select=".shadowhost_content2"></content>！</h1>
		</template>
		<!-- E 模板标签 template -->
		<script>
			var shadowHost = document.querySelector('.shadowhost');
			var shadowRoot = shadowHost.createShadowRoot();
			var template = document.querySelector('.template');
			shadowRoot.appendChild(document.importNode(template.content, true));
		</script>

	</body>

</html>